<script setup>
import {menuArr, moreMenuArr} from '@/pages/user/config'
import PrimaryButton from '@/components/PrimaryButton.vue'
import {useNavigateTo} from "@/hooks/useNavigateTo";

const {navigateTo} = useNavigateTo()
</script>

<template>
  <view class="user-layout">
    <view class="flex-between p-30">
      <!-- 头像 & 用户名 -->
      <view class="userInfo flex">
        <!--头像-->
        <view class="left m-r-30">
          <image class="full-image avatar" src="/static/images/user/avatar.png"></image>
        </view>
        <!--用户名-->
        <view class="right p-tb-15  f-col-between">
          <view class="tb fs-36">Ning Che</view>
          <view class="c-9 fs-26">黄金会员</view>
        </view>
      </view>

      <!-- 修改信息 -->
      <view class="flex-center">
        <PrimaryButton text="修改信息" padding-l-r="20rpx"/>
      </view>
    </view>

    <!-- 开通会员 -->
    <view class="open-member">

    </view>

    <!-- 菜单栏 -->
    <view class="menu br-20 m-lr-30">
      <view class="menu-item f-col-between align-center p-tb-30"
            v-for="item in menuArr"
            :key="item.text"
            @click="navigateTo(item.href)"
      >
        <view class="menu-icon icon" :class="[item.icon]"></view>
        <view class="c-6 fs-26 m-t-15">{{ item.text }}</view>
      </view>
    </view>

    <!-- 菜单栏——更多 -->
    <view class="menu-more m-t-30">
      <van-cell-group inset style="--van-cell-group-inset-radius: 20rpx">
        <van-cell
            style="--van-cell-line-height: 80rpx"
            v-for="item in moreMenuArr"
            :key="item.title"
            :title="item.title"
            is-link
            @click="navigateTo(item.href, true)"
        >
          <template #icon>
            <view style="height: 75rpx;" class="flex-center m-r-15">
              <view class="icon" :class="[item.icon]"></view>
            </view>
          </template>
        </van-cell>
      </van-cell-group>
    </view>

    <!-- 退出登录 -->
    <view class="m-t-80 p-lr-40">
      <PrimaryButton text="退出登录" plain padding-t-b="20rpx"></PrimaryButton>
    </view>
  </view>
</template>

<style scoped lang="scss">
.user-layout {
  .left {
    width: 130rpx;
    height: 130rpx;
  }

  .change-info {

    text {
      color: #1a1617;
    }

    &:active {
      background-color: #1a1617;
    }

    &:active text {
      color: #ffffff;
    }
  }

  .menu {
    background-color: #fff;
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(4, 1fr);

    .menu-item:active {
      background-color: #F2F3F5;
    }
  }
}
</style>